
let layer = layui.layer;
let laypage = layui.laypage
// 声明分页需要的请求参数
query = {
    catename: '',
    page: 1,
    limit: 8
}
// map渲染 包装调用
async function render() {
    // { status, data: { data, errmsg } }
    const { status, data: { data, errmsg } } = await axios.get('/ydd_cate/list', { params: query })
    // console.log(data)
    if (status !== 200) {
        return layer.msg(errmsg)
    }
    const newStr = data.data.map((item, index) => {
        const { id, catename, default_data, icon, sort_num } = item
        return `<tr>
        <td>${index + 1}</td>
        <td>${id}</td>
        <td>${catename}</td>
        <td>${icon} <i data-v-4f4f6ef4 class="fa ${icon}"></i></td>
        <td>${sort_num}</td>
        <td>
        <button type="button" id='del' class="layui-btn layui-btn-warm layui-btn-xs btn_edit fa fa-edit" data-id=${id}>编辑</button>
          <button type="button" id='del' class="layui-btn layui-btn-danger layui-btn-xs btn_delete fa fa-trash" data-id=${id}>删除</button>
        </td>
    </tr>
    `
    }).join('')
    // console.log(newStr);
    document.querySelector('#list').innerHTML = newStr
    renderPage(data.count)
}
render()
// 删除按钮
document.querySelector('#list').addEventListener('click', async function (e) {
    if (e.target.className === 'layui-btn layui-btn-danger layui-btn-xs btn_delete fa fa-trash') {
        const id = e.target.dataset.id
        const {data: { errmsg } } = await axios.get(`/ydd_cate/del`, { params: { id: id } })
        // console.log(errmsg);
        if (errmsg === '') {

            return render(), layer.msg('删除成功')
        }

        layer.msg(errmsg)


    }
})

// 新增弹出层
let indexAddForm
document.querySelector('.layui-btn-normal').addEventListener('click', function () {
    let addFormStr = `
    <form id="addFormi" class="layui-form">
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item" id='ttop'>
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" id='first' name="catename" required  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">图标class</label>
                <div class="layui-input-block">
                  <input type="text" id='two' name="icon" required  lay-verify="required" placeholder="请输入class" autocomplete="off" class="layui-input">
    </div>
    
    <div class="layui-form-item" id='ato'>
    <label class="layui-form-label">权重赋值</label>
    <button id='subtract'>-</button>
  <input type="text" id="result" value="0" name="sort_num" valuemax="10" valuemin="1">
  <button id='add1'>+</button>
</div>

    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo" id="newa">确认添加</button>
                  
    </div>
    </div>
</form>`
    indexAddForm = layer.open({
        title: ['添加分类', 'font-size:20px'],
        type: 1,
        area: ['500px', '280px'],
        anim: 2,
        content: addFormStr
    });
    let num = 0;
    const result = document.getElementById("result");
    const add1 = document.querySelector('#add1')
    const subtract = document.querySelector('#subtract')
    add1.addEventListener('click', function (e) {
        e.preventDefault()
        num++;
        result.value = num;
    })

    subtract.addEventListener('click', function (e) {
        e.preventDefault()
        num--;
        result.value = num;
    })

    // 数据提交
    // const newa = document.querySelector('#new')
    $('body').on('submit', '#addFormi', async function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        data.sort_num = + data.sort_num
        //  console.log(data);
        const { status, data: { errmsg } } = await axios.post('/ydd_cate/add', data)
        // if (status !== 200) {
        //     return layer.msg(errmsg)
        // }
        layer.msg('添加成功')
        layer.close(indexAddForm)
        render()


    })


})

// 编辑弹出层
let form = layui.form;
// 声明弹出层参数
let addFormStr = `
<form id="editForm" class="layui-form" lay-filter="editdForm">
        <div class="layui-form-item layui-hide" >
            <label class="layui-form-label ">编辑分类</label>
            <div class="layui-input-block">
              <input type="text" name="id" required id='first'  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
        </div>
        </div>

        <!-- 第一行 分类名称 -->
        <div class="layui-form-item" id='ttop'>
            <label class="layui-form-label">编辑分类</label>
            <div class="layui-input-block">
              <input type="text" id='first' name="catename"  required  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
            <label class="layui-form-label">图标class</label>
            <div class="layui-input-block">
              <input type="text" id='first' name="icon" required  lay-verify="required" placeholder="请输入class" autocomplete="off" class="layui-input">
</div>

<div class="layui-form-item" id='ato'>
<label class="layui-form-label">权重赋值</label>
<button id='subtract'>-</button>
  <input type="text" id="result" value="0" name="sort_num" valuemax="10" valuemin="1">
  <button id='add1'>+</button>
</div>

</div>
        <!-- 第三行 按钮  lay-filter="formDemo" -->
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit  id="newa">确认修改</button>
              
</div>
</div>
</form>`
let indexXForm
$('#list').on('click', '.btn_edit', async function () {
    // 弹出层参数表
    indexXForm = layer.open({
        title: ['修改分类', 'font-size:20px'],
        type: 1,
        area: ['500px', '280px'],
        anim: 2,
        content: addFormStr,

    });

    const id = $(this).attr('data-id')//id可以显示出来

    const { data: { data } } = await axios.get('/ydd_cate/rowInfo', { params: { id: id } })
    form.val("editdForm", data)
    // console.log(data);



    let num = 0;
    const result = document.getElementById("result");
    const add1 = document.querySelector('#add1')
    const subtract = document.querySelector('#subtract')
    add1.addEventListener('click', function (e) {
        e.preventDefault()
        num++;
        result.value = num;
    })

    subtract.addEventListener('click', function (e) {
        e.preventDefault()
        num--;
        result.value = num;
    })

    $('body').on('submit', '#editForm', async function (e) {
        e.preventDefault()
        let dataa = $(this).serialize()

        // console.log(dataa);

        const res = await axios.post('/ydd_cate/update', dataa)
        // if (status !== 200) {
        //     return layer.msg(errmsg)
        // { status, data: { errmsg } } }
        // console.log(res);
        layer.msg('修改成功')
        layer.close(indexXForm)
        render()


    })

})
// 分页渲染
function renderPage(count) {

    laypage.render({
        elem: 'page-box',
        count,//数据总数，从服务端得到

        limit: query.limit,//每页显示的条数
        curr: query.page,// 起始页
        limits: [2, 4, 8],//每页条数的选择项
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.page = obj.curr
            query.limit = obj.limit

            //首次不执行
            if (!first) {
                //do something
                // page() 
                render()
                //点击切换的时候执行，发请求
            }
        }
    })

}
// 搜索框
$('.search').on('click', function () {
    const content = $('#val').val()
    query.catename = content
    render()
})
// 重置
$('.reset').on('click', function () {
    // 点击时刷新
    $('#Refresh').click()
})
// 文件导出功能
// function exportFile() {
//     // 创建一个文本字符串，并设置相关的参数
//     const data = "导出的文件内容";
    
//     // 利用URL.createObjectURL方法创建一个指向data的Blob URL
//     const blob = new Blob([data], { type: "text/plain;charset=utf-8" });
//     const blobURL = URL.createObjectURL(blob);
    
//     // 创建一个a标签，设置相关属性，并模拟点击a标签下载文件
//     const a = document.createElement("a");
//     a.download = "分类目录.xlsx";
//     a.href = blobURL;
//     a.click();
  
//     // 释放URL.createObjectURL方法创建的URL对象
//     setTimeout(() => {
//       URL.revokeObjectURL(blobURL);
//     }, 0);
//   }
// ==================== 点击导出下载文件 ====================
$('#dao').click(function () {
    var table = document.getElementById("tabInfo")
    var data = []
    for (var i = 0, row; row = table.rows[i]; i++) {
        var rowData = []
        for (var j = 0, col; col = row.cells[j]; j++) {
            rowData.push(col.innerText)
        }
        data.push(rowData)
    }
    // 创建工作簿
    var workbook = XLSX.utils.book_new()

    // 创建工作表
    var worksheet = XLSX.utils.aoa_to_sheet(data)

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")

    // 导出工作簿为 Excel 文件
    XLSX.writeFile(workbook, "数据.xlsx")
})



// 点击隐藏搜索栏
$('.b1').on('click',function(){
   $('.left').toggleClass('hiden')
})
// 搜索刷新按钮
$('.b2').on('click',function(){
    
    // const content = $('#val').val()
    // query.catename = content
    // render()
    $('#Refresh').click()
    
})

// /右侧工具栏
// layui.use('table', function(){
//     var table = layui.table;
    
//     table.render({
//       elem: '#test'
//       ,url:'../../test/table/demo1.json.js'/*tpa=http://www.ilayuis.com/test/table/demo1.json*/
//       ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
//       ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
//         title: '提示'
//         ,layEvent: 'LAYTABLE_TIPS'
//         ,icon: 'layui-icon-tips'
//       }]
//       ,title: '用户数据表'
//       ,cols: [[
//         {type: 'checkbox', fixed: 'left'}
//         ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
//         ,{field:'username', title:'用户名', width:120, edit: 'text'}
//         ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
//           return '<em>'+ res.email +'</em>'
//         }}
//         ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
//         ,{field:'city', title:'城市', width:100}
//         ,{field:'sign', title:'签名'}
//         ,{field:'experience', title:'积分', width:80, sort: true}
//         ,{field:'ip', title:'IP', width:120}
//         ,{field:'logins', title:'登入次数', width:100, sort: true}
//         ,{field:'joinTime', title:'加入时间', width:120}
//         ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
//       ]]
//       ,page: true
//     });})

